<template>
  <my-header></my-header>
  <view class="container bg-color1" :style="{minHeight:_100vh-getStatusBarHeight()-17+'px'}">
    <!-- 头像区 -->
    <view class="a-box flex-between">
      <view class="flex">
        <fui-avatar src="../../static/default-avatar.jpg" size="large"></fui-avatar>
        <view class="text-box flex-col-center-around">
          <view class="" @click="goLogin">去登录</view>
          <view class="" @click="goTicket">卡券 0</view>
        </view>
      </view>

      <!-- 客服和设置icon -->
      <view class="icon-box">
        <uni-icons fontFamily="CustomFont" :size="20" class="kefu">{{ '&#xeada;' }}</uni-icons>
        <uni-icons @click="goSetting" fontFamily="CustomFont" :size="20" class="setting">{{ '&#xe8b7;' }}</uni-icons>
      </view>
    </view>
    <!-- 面板区 -->
    <view class="panel-box flex-even-space">
      <view @click="goCollect" class="my-collect flex-col-align">
        <uni-icons :size="34" type="heart"></uni-icons>
        <view class="text">我的收藏</view>
      </view>
      <view @click="goOrder" class="my-order flex-col-align">
        <uni-icons :size="34" type="wallet-filled"></uni-icons>
        <view class="text">我的订单</view>
      </view>
      <view @click="goRaise" class="raise flex-col-align">
        <uni-icons :size="34" type="person"></uni-icons>
        <view class="text">助教招募</view>
      </view>
      <view @click="goSuggestion" class="provider-sugg flex-col-align">
        <uni-icons :size="34" type="paperplane-filled"></uni-icons>
        <view class="text">意见反馈</view>
      </view>
    </view>
    <!-- 推荐列表区 -->
    <uni-section class="rec-box" title="为您推荐" type="line">
      <template v-for="(a, index) of 1" :key="index">
        <assistant-item :popup="chooseCatePopup" :assis="{}"></assistant-item>
      </template>
    </uni-section>
  </view>

  <!-- 选择时长弹出层 -->
  <public-popup ref="pubPopupRef"></public-popup>
</template>

<script setup>
  import {
    getStatusBarHeight
  } from '../../utils/system_info/index.js'
  import {
    onMounted,
    ref
  } from 'vue';
  const _100vh = uni.getSystemInfoSync().windowHeight;
  const pubPopupRef = ref(null);
  const chooseCatePopup = ref(null);
  // 组件挂载完毕
  onMounted(() => {
    chooseCatePopup.value = pubPopupRef.value.chooseCatePopup;
  });
  // 去登录
  function goLogin() {
    uni.navigateTo({
      url: '/pages/login/login'
    });
  }
  // 我的卡券页面
  function goTicket() {
    uni.navigateTo({
      url: '/subpkg/my-ticket/my-ticket'
    });
  }
  // 去设置
  function goSetting() {
    uni.navigateTo({
      url: '/subpkg/setting/setting'
    });
  }

  function goCollect() {
    uni.navigateTo({
      url: '/subpkg/my-collect/my-collect'
    });
  }

  function goOrder() {
    uni.switchTab({
      url: '/pages/order/order'
    });
  }

  function goRaise() {
    uni.navigateTo({
      url: '/subpkg/raise-ass/raise-ass'
    });
  }

  function goSuggestion() {
    uni.navigateTo({
      url: '/subpkg/provide-sugg/provide-sugg'
    });
  }
</script>

<style lang="scss" scoped>
  @font-face {
    font-family: CustomFont;
    src: url('../../static/font-icon/iconfont.ttf');
  }

  .container {
    padding: 24rpx;

    // 头像区
    .a-box {
      .text-box {
        margin-left: 20rpx;
      }

      .icon-box {
        .kefu {
          margin-right: 30rpx;
        }
      }
    }

    //面板区
    .panel-box {
      margin: 30px 0;
      background: #fff;
      padding: 20rpx;
      font-size: 17rpx;
      border-radius: $uni-border-radius-lg;

      .text {
        margin-top: 16rpx;
      }
    }

    // 推荐列表区
    .rec-box {
      border-radius: $uni-border-radius-lg;
    }
  }
</style>